/**
 * 主题相关js
 */
class Theme {
    constructor(fw) {
      this.$framework = fw;
      this.$f7 = fw.$f7;

      this.globalTheme = "light";
      this.globalBarsStyle = "empty";
      this.globalCustomColor = "";
      this.globalCustomProperties = "";

      this.stylesheet = document.createElement("style");
      document.head.appendChild(this.stylesheet);

      this.theme = this.globalTheme;
      this.barsStyle = this.globalBarsStyle;
      this.customColor = this.globalCustomColor;
      this.customProperties = this.globalCustomProperties;
      this.themeColor = this.$f7.$("html").css("--f7-theme-color").trim();

      this.timeout = null;
    }

    generateStylesheet() {
      var self = this;
      var styles = "";
      if (self.customColor) {
          const colorThemeProperties = this.$f7.utils.colorThemeCSSProperties(
              self.customColor
          );
          if (Object.keys(colorThemeProperties).length) {
              styles += `
              :root {
              ${Object.keys(colorThemeProperties)
                .map(key => `${key}: ${colorThemeProperties[key]};`)
                .join("\n  ")}
              }`;
          }
      }
      if (self.barsStyle === "fill") {
          const colorThemeRgb = self.$f7
              .$("html")
              .css("--f7-theme-color-rgb")
              .trim()
              .split(",")
              .map(c => c.trim());
          styles += `
              :root,
              :root.theme-dark,
              :root .theme-dark {
                --f7-bars-bg-color: var(--f7-theme-color);
                --f7-bars-bg-color-rgb: var(--f7-theme-color-rgb);
                --f7-bars-translucent-opacity: 0.9;
                --f7-bars-text-color: #fff;
                --f7-bars-link-color: #fff;
                --f7-navbar-subtitle-text-color: rgba(255,255,255,0.85);
                --f7-bars-border-color: transparent;
                --f7-tabbar-link-active-color: #fff;
                --f7-tabbar-link-inactive-color: rgba(255,255,255,0.54);
                --f7-sheet-border-color: transparent;
                --f7-tabbar-link-active-border-color: #fff;
              }
              .appbar,
              .navbar,
              .toolbar,
              .subnavbar,
              .calendar-header,
              .calendar-footer {
                --f7-touch-ripple-color: var(--f7-touch-ripple-white);
                --f7-link-highlight-color: var(--f7-link-highlight-white);
                --f7-button-text-color: #fff;
                --f7-button-pressed-bg-color: rgba(255,255,255,0.1);
              }
              .navbar-large-transparent {
                --f7-navbar-large-title-text-color: #000;
                --r: ${colorThemeRgb[0]};
                --g: ${colorThemeRgb[1]};
                --b: ${colorThemeRgb[2]};
                --progress: var(--f7-navbar-large-collapse-progress);
                --f7-bars-link-color: rgb(
                  calc(var(--r) + (255 - var(--r)) * var(--progress)),
                  calc(var(--g) + (255 - var(--g)) * var(--progress)),
                  calc(var(--b) + (255 - var(--b)) * var(--progress))
                );
              }
              .theme-dark .navbar-large-transparent {
                --f7-navbar-large-title-text-color: #fff;
              }`;
      }
      return styles.trim();
    }

    setColorTheme(color) {
      var self = this;
      var $html = self.$f7.$("html");
      var currentColorClass = $html[0].className.match(/color-theme-([a-z]*)/);
      if (currentColorClass) {
          $html.removeClass(currentColorClass[0]);
      }
      $html.addClass("color-theme-" + color);
      self.unsetCustomColor();
      self.themeColor = $html.css("--f7-color-" + color).trim();
    }

    unsetCustomColor() {
      var self = this;
      self.globalCustomColor = "";
      self.customColor = "";
      self.globalCustomProperties = self.generateStylesheet();
      self.stylesheet.innerHTML = self.globalCustomProperties;
      self.customProperties = self.globalCustomProperties;
    }

    setLayoutTheme(theme) {
      var self = this;
      var $html = self.$f7.$("html");
      self.globalTheme = theme;
      $html.removeClass("theme-dark theme-light").addClass("theme-" + self.globalTheme);
      self.theme = self.globalTheme;
    }

    setBarsStyle(barsStyle) {
      var self = this;
      self.globalBarsStyle = barsStyle;
      self.barsStyle = self.globalBarsStyle;
      self.globalCustomProperties = self.generateStylesheet();
      self.stylesheet.innerHTML = self.globalCustomProperties;
      self.customProperties = self.globalCustomProperties;
    }

    setCustomColor(color) {
      var self = this;
      if (self.themeColor === color) return;
      clearTimeout(self.timeout);
      self.timeout = setTimeout(() => {
        self.globalCustomColor = color;
        self.customColor = self.globalCustomColor;
        self.globalCustomProperties = self.generateStylesheet();
        self.stylesheet.innerHTML = self.globalCustomProperties;
        self.customProperties = self.globalCustomProperties;
      }, 300);
    }
}

export default Theme;
